/*
 * 有赞订单列表列表
 * @Author: zfx
 * @Date: 2018-07-18 14:00:05
 */
<style lang="less" rel="stylesheet/less" type="text/less" >
.v-customer-youzan-index{
	.ivu-table-column-center{
		padding: 5px 0;
	}
	.ivu-table-cell{
		padding-left: 10px;
		padding-right: 10px;
	}
	.ivu-table-body {
		overflow-x: auto;
	}
	.info{
		text-align: left;
		white-space: nowrap;
		padding: 5px 0;
	}
	.info-thumb{
		width: 60px;
		height: 60px;
		display: table-cell;
		cursor: pointer;
		img{
			width: 100%;
		}
	}
	.info-title{
		height: 60px;
		display:  table-cell;
		white-space: normal;
		vertical-align: middle;
		padding-left: 8px;
	}
	.prices-item {
		white-space: nowrap;
		text-align: center;
	}
	.deleted, .hot, .new, .sale {
		cursor: pointer;
	}
}
</style>
<template>
	<div class="v-customer-youzan-index">

		<Table
			:columns="columns"
			:loading="loading"
			:data="favorableOrders"
			:height="tableHeight()"
			class="personal-scrollbar"
			border/>

	</div>
</template>

<script>
import { Button } from 'iview';
import showPictureMixin from 'src/views/mixins/showPictureMixin';
import { computedTableHeight } from 'src/views/mixins/computedTableHeight';

export default {
	name: 'YouzanOrderIndex',
	mixins: [showPictureMixin, computedTableHeight],
	props: {
		loading: {
			type: Boolean,
			default() {
				return false;
			},
		},
		favorableOrders: {
			type: Array,
			default() {
				return [];
			},
		},
	},
	data() {
		return {
			columns: [
				{
					title: this.$t('favorable_order.order_number'),
					key: 'trad_no',
					align: 'center',
					render: (h, { row }) => <div> { row.trad_no || '-' } </div>,
				},
				{
					title: this.$t('favorable_order.title'),
					key: 'product_title',
					width: 240,
					align: 'center',
					render: (h, { row }) => {
						const image = row.product_thumb_url ? <img onClick={() => this.showPicture(row.product_thumb_url)} src={row.product_thumb_url} alt="无"/> : '无';
						const title = row.product_title ? row.product_title : this.$t('common.none');
						return (
							<div class="info">
								<div class="info-thumb">{ image }</div>
								<div class="info-title">{ title }</div>
							</div>
						);
					},
				},
				{
					title: this.$t('favorable_order.buyer'),
					key: 'buyer',
					align: 'center',
					render: (h, { row }) => <div> { row.buyer || '-' } </div>,
				},
				// {
				// 	title: this.$t('favorable_order.order_type'),
				// 	key: 'order_type',
				// 	align: 'center',
				// 	render: (h, { row }) => <div> { row.order_type || '-' } </div>,
				// },
				{
					title: this.$t('favorable_order.total_order_price'),
					key: 'total_fee',
					align: 'center',
					render: (h, { row }) => <div> { `￥${Number(row.total_fee).toFixed(2)}` || '-' } </div>,
				},
				{
					title: this.$t('favorable_order.creation_time'),
					key: 'created_at',
					align: 'center',
					render: (h, { row }) => {
						let date = <div>{ this.$t('common.none') }</div>;
						if (row.created_at) {
							const [day, time] = row.created_at.split(' ');
							date = (<div>
								<div>{day}</div>
								<div>{time}</div>
							</div>);
						}
						return date;
					},
				},
				{
					title: this.$t('favorable_order.payment_time'),
					key: 'pay_time',
					align: 'center',
					render: (h, { row }) => {
						let date = <div>{ '-' }</div>;
						if (row.pay_time) {
							const [day, time] = row.pay_time.split(' ');
							date = (<div>
								<div>{day}</div>
								<div>{time}</div>
							</div>);
						}
						return date;
					},
				},
				{
					title: this.$t('favorable_order.refund_state'),
					key: 'status_str',
					align: 'center',
					render: (h, { row }) => <div style={ row.refund_state === 2 || row.refund_state === 12 ? 'color: green' : 'color: red'}>{row.refund_state_str}</div>,
				},
				{
					title: this.$t('favorable_order.order_status'),
					key: 'status_str',
					align: 'center',
					render: (h, { row }) => <div style="color: red;"> { row.status_str || '-' } </div>,
				},
				{
					title: this.$t('common.operation'),
					align: 'center',
					width: 140,
					render: (h, { row }) => (
						<div>
							<Button size="small" style={{ marginRight: '5px' }} on-click={() => { this.$emit('show', row.trad_no); }} type="primary">
								{ this.$t('favorable_order.order_details') }
							</Button>
						</div>),
				},
			],
		};
	},
	methods: {

	},
};
</script>
